import { Button, InfiniteScroll, NavBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import request from "../../api/request";
import { setDetailList } from '../../store/detail/detailSlice';

function Tick() {
    const navigate=useNavigate();
    const dispatch=useDispatch();
    const {start,end,date}=useSelector(state=>state.list);
    const [list,setList]=useState([]);
    const [page,setPage]=useState(1);
    const getList=async()=>{
        const res=await request.post('/trip/train',{start,end,date,page})
        console.log(res.data.data)
        setList(list.concat(res.data.data))
        setPage(page+1)
    }
    //跳详情
    const goDetail=(start,end,price,type)=>{
        dispatch(setDetailList({start,end,price,type}))
        navigate('/detail:id')
    }
    useEffect(()=>{
        getList()
    },[])
  return (
    <div>
      <NavBar onBack={()=>navigate(-1)}>{start}---{end}</NavBar>
      <h3 style={{textAlign:"center"}}>{date}</h3>
      <div>
        {
            list.map((v,i)=>{
                return <dl key={i} style={{display:"flex", justifyContent:"space-around", padding:10, borderBottom:"1px solid #ccc"}}>
                    <dt>
                        <div>{v.start}---{v.end}</div>
                    </dt>
                    <dd>
                        <div>{v.isSpeed ? '高速船' : '低速船'}</div>
                        <div>{v.isSeat ? '有票' : '无票'}</div>
                    </dd>
                    <dd>
                        <div>商务座:<span style={{color:"red"}}>￥{v.tick.vip}<Button onClick={()=>goDetail(start,end,v.tick.vip,"商务座")} size="mini" style={{marginLeft:'10px'}}>预定</Button></span></div>
                        <div>一等座:<span style={{color:"red"}}>￥{v.tick.firstTick}<Button onClick={()=>goDetail(start,end,v.tick.firstTick,"一等座")} size="mini" style={{marginLeft:'10px'}}>预定</Button></span></div>
                        <div>二等座:<span style={{color:"red"}}>￥{v.tick.secondTick}<Button onClick={()=>goDetail(start,end,v.tick.secondTick,"二等座")} size="mini" style={{marginLeft:'10px'}}>预定</Button></span></div>
                    </dd>
                </dl>
            })
        }
      </div>
      <InfiniteScroll hasMore={true} loadMore={getList}></InfiniteScroll>
    </div>
  )
}

export default Tick
